<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咱们的乐购商城</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入通用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入自己的样式 头部 -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- 引入放大镜的css -->
    <link rel="stylesheet" href="./css/magnifier.css">
    <!-- 引入自己的样式 头部 -->
    <link rel="stylesheet" href="./css/productDetail.css">
    <!-- 引入jquery -->
    <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入放大镜的js -->
    <script src="./js/lib/magnifier.js"></script>
    <!-- 引入自己的JS -->
    <script src="./js/productDetail.js"></script>

    <style>
        .catCheck label {
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            color:rgb(102, 102, 102);
            /* 不让选择内容 */
            user-select: none;
            border: 1px solid rgb(102, 102, 102);
        }
        .catCheck label input {
            display: none;
            /* visibility: hidden; */
        }
        .catCheck {
            margin:10px 0;
        }

        /* 常规当前元素的样式 */
        .container .active {
            border:1px solid #ff6600; 
            position: relative;
        }
        /* 添加内容的样式 */
        .active::after {
            content: '✔';
            background-color: #ff6600;
            color:white;
            position: absolute;
            right:0;
            bottom: 0;
            line-height: 20px;
            height: 20px;
            width: 20px;
        }
      
    </style>

</head>

<body>
    <header class="">
        <!-- 第一行 -->
        <div class="first-bar full-container">
            <div class="center clear-fix">
                <img src="./images/logo.jpg" alt="">
                <p class="fl"><a href="#" class="font-white">legochina.cn</a></p>
                <p class="fr">欢迎光临<span class="theme-color">乐购</span>,请<span>登录</span>\<span
                        class="theme-color">注册</span></p>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center clear-fix">
            <div class="fr clear-fix search-box">
                <form id="sub-form" action="" class="fl">
                    <input type="text">
                    <input type="submit" value="" class="theme-bg">
                </form>

                <div class="fl">
                    购物车<span>3</span>
                </div>
                <div class="fl">
                    我的订单
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav-bar center">
            <ul class="clear-fix">
                <li>图书</li>
                <li>电子书</li>
                <li>原创文学</li>
                <li>服装</li>
                <li>运动户外</li>
                <li>儿童装</li>
                <li>家居</li>
                <li>创意文具</li>
                <li>地方特产</li>
                <li>海外购</li>
                <li>电器城</li>
            </ul>
        </div>
    </header>

    <main>
        <section id="proDetail" class="container-fluid p20 bgcf3 bs center">
            <p class="container">
                <a href="#">图书</a> >
                <a href="#">小说</a> >
                <a href="#">情感/家庭/婚姻</a> >
                <a href="#">博集天卷</a> >
                <a href="#">她和他</a>
            </p>
            <div class="container clearfix bgcfff p1020 bs">
    
                <!--放大镜-->
                <div class="magnifier fl" id="magnifier1">
                    <div class="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="images/1.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="images/2.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="images/3.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="images/4.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="images/1.png" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                </div>
    
                
    
                <!--图书详情-->
                <div class="fr bookdetail">
                    <div class="p1020">
                        <h2 class="f20">她和他</h2>
                        <p class="cred">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                        <p>[法] 马克·李维 著；杨亦雨 译</p>
                    </div>
                    <div class="bgcccc p1020 priceDel">
                        <p>
                            <span>乐 购 价：</span>
                            <span class="cred f20">&yen;26.20</span> <span>[6.9折] </span>
                            <span>[定价：￥38.00]</span>
                            <span>(降价通知)</span>
                        </p>
                        <p>
                            <span>促销信息：</span>
                            <span class="cred f12">满减 每满150.00元，可减50.00元现金</span>
                            <a href="#">详情 >></a>
                        </p>
                        <p>
                            <span>领 券：</span>
                            <i>100-6</i>
                            <i>200-50</i>
                        </p>
                        <p class="evaluation">
                            <span>累计评价</span>
                            <span class="cf60">10000</span>
                        </p>
                    </div>
                    <p class="p1020 catCheck">
                        <span>种类选择：</span>
                        <label class="active">
                            平装版<input type="checkbox" name="" id="">
                        </label>
                        <label>
                            精装版<input type="checkbox" name="" id="">
                        </label>
                        <label>
                            豪华版<input type="checkbox" name="" id="">
                        </label>
                        <label>
                            豪华版plus<input type="checkbox" name="" id="">
                        </label>
                    </p>
    
                    <div class="clearfix p1020 mt30">
                        <div class="proNum fl">
                            <input type="text" value="1">
                            <a id="addNum">+</a>
                            <a id="reNum">-</a>
                        </div>
                        <p class="addCar fl"><a class="cfff" href="#">加入到购物车</a></p>
                    </div>
                </div>
    
    
            </div>
        </section>
    </main>

    <footer class="center">
        <img src="./images/footer.png" alt="">
    </footer>

</body>
</html>